<template>
    <div class="article-box">
      <div class="title">{{ article.title }}</div>
      <div class="time">{{ formatDate(article.modify_time) }}</div>
      <div class="content" v-html="article.content"></div>
    </div>
</template>

<script>
  export default {
    name: 'Article',
    data () {
      return {
        article: {}
      }
    },
    mounted () {
      this.$emit('setBack')
      this.getArticle()
    },
    destroyed: function () {
      this.$emit('removeBack')
    },
    methods: {
      getArticle () {
        this.$axios.get("http://localhost:3000/getArticleById?id="+this.$route.params.id).then((response) => {
          if (response.data.data){
            this.article = response.data.data
          } else {
            console.log('Load Failed')
          }
        },(err) => {
          console.log(err)
        })
      },
      formatDate(datetime) {
        if(datetime) {
          let date = (datetime.split('T'))[0];
          let time = ((datetime.split('T'))[1].split('.'))[0];
          return date + ' ' + time;
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.article-box {
  color: #fff;
  padding: 44px 30px 55px;
}

.title {
  text-align: center;
  font-size: 13px;
  padding-top: 10px;
}

.time {
  text-align: right;
  font-size: 12px;
  padding: 10px 0;
}

.content {
  font-size: 14px;
  padding-top: 20px;
}

.content >>> img {
  max-width: 100%;
}
</style>
